<template>
  <button type="submit" :class="classes" @click="toggle">
    <span class="glyphicon glyphicon-heart"/>
    <span v-text="count"/>
  </button>
</template>

<script>
export default {
  name: 'Favorite',
  data() {
    return {
      count: this.reply.favorites_count,
      active: this.reply.is_favorited,
    }
  },

  props: ['reply'],

  computed: {
    classes() {
      return [
        'btn',
        this.active
          ? 'btn-primary'
          : 'btn-default',
      ]
    },

    endpoint() {
      return '/replies/' + this.reply.id + '/favorites'
    },
  },

  methods: {
    toggle() {
      this.active ? this.destroy() : this.create()
    },

    create() {
      axios.post(this.endpoint)
        .then(res => {
          this.active = true
          this.count++
        })
    },

    destroy() {
      axios.delete(this.endpoint)
        .then(res => {
          this.active = false
          this.count--
        })
    },
  },
}
</script>

<style scoped>

</style>
